<template>
  <div class="header">
    <div class="header--hd">
      <h3>{{title}}</h3>
      <div class="classify">
        <p>美术类 / 国画</p>
        <p>编号：{{number}}</p>
      </div>
    </div>
    <div class="header--bd">
      <p class="like">{{likeCount}}</p>
      <p class="watched">{{watchedCount}}</p>
      <p class="time">{{time}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      title: '作品标题',
      number: 'GH-0001',
      likeCount: 725,
      watchedCount: 151,
      time: '2019-05-30 17:30'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  .header {
    padding 35px 20px 21px
    border-bottom 1px solid rgb(234,234,234)

    .header--hd {
      margin-bottom 20px

      h3 {
        font-size 24px
        margin-bottom 10px
      }

      .classify {
        display flex
        justify-content space-between
        font-size 14px
        color rgb(204,204,204)
      }
    }

    .header--bd {
      display flex
      text-align center

      p {
        height 21px
        border-right 1px solid rgb(234, 234, 234)
        font-size 14px
        color rgb(17, 17, 17)
      }

      .like {
        display flex
        align-items center
        flex: 1
        text-align left

        &::before {
          content ""
          display inline-block
          width 20px
          height 20px
          background url('../assets/like.svg') no-repeat center
          background-size 17px
          margin-right 5px
        }
      }

      .watched {
        display flex
        align-items center
        justify-content center
        flex: 1.2

        &::before {
          content ""
          display inline-block
          width 20px
          height 20px
          background url('../assets/watched.svg') no-repeat center
          background-size 18px
          margin-right 5px
        }
      }

      .time {
        display flex
        align-items center
        justify-content flex-end
        border-right 0
        text-align right
        flex: 1.8

        &::before {
          content ""
          display inline-block
          width 20px
          height 20px
          background url('../assets/time.svg') no-repeat center
          background-size 17px
          margin-right 5px
        }
      }
    }
  }
</style>
